HTML
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Stats</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- /nav menu -->
<hr id="m-01">
<div id="hamburger">
<!-- hamburger -->
<div class='bx bx-menu'></div>
</div>
<section id="slide-menu">
<!-- 閉じるボタン -->
<div class='bx bx-x close-btn'></div>
<div class="menu-wrapper">
<!-- <h2 class="section-heading" data-outline="Menu">Menu</h2> -->
<ul>
<li><a data-text="Home" href="#">Home</a></li>
<li><a data-text="Service" href="#">Service</a></li>
<li><a data-text="Testimonials" href="#">Testimonials</a></li>
<li><a data-text="Stats" href="#">Stats</a></li>
<li><a data-text="About" href="#">About</a></li>
<li><a data-text="Projects" href="#">Projects</a></li>
<li><a data-text="Contact" href="#">Contact</a></li>
</ul>
</div>
</section>
<!-- endnavigation section -->
<!-- contact section -->
<section id="contact-section" class="contact-container">
<h2 class="section-heading" data-outline="Contact">Contact</h2>
<div class="contact-wrapper">
<div class="left-wrap">
<div class="text-area">
<h3 class="item-heading">Hire/Inquiry</h3>
<p class="desc">Lorem ipsum dolor, sit <br>amet consectetur <br>adipisicing elit. Sit, et.</p>
<div class="address-area">
<ul>
<li><a href="#"><i class='bx bx-fw bx-phone bx-sm'></i>+2121212121</a></li>
<li><a href="#"><i class='bx bx-fw bx-envelope bx-sm'></i>webmail@gmail.com</a></li>
<li><a href="#"><i class='bx bx-fw bx-user-circle bx-sm'></i>Tokyo Japan</a></li>
</ul>
</div>
<div class="sns-area">
<div class="logos">
<a href="#" class="facebook"><i class='bx bxl-facebook'></i></a>
<a href="#" class="twitter"><i class='bx bxl-twitter'></i></a>
<a href="#" class="instagram"><i class='bx bxl-instagram'></i></a>
</div>
</div>
</div>
</div>
<div class="right-wrap">
<div class="form-area">
<form action="#">
<div class="f-group">
<label for="name">Your Name</label><br>
<input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="f-group">
<label for="email">Your Email</label><br>
<input type="email" id="email" name="email" placeholder="Email">
</div>
<div class="f-group">
<label for="message">Message</label><br>
<textarea type="text" name="message" id="message" rows="10" placeholder="Message"></textarea>
</div>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</div>
</div>
</div>
</section>
SCSS
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
position:fixed;
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
backdrop-filter:blur(20px);
box-shadow:-21px 21px 96px #b8b8b8, 21px -21px 96px #ffffff;
z-index:20;
nav{
ul{
text-transform:uppercase;
list-style-type:none;
li{
// 横並び
display:inline-block;
a{
text-decoration:none;
color:gray;
margin-left:20px;
font-size:1.2rem;
transition:all 0.3s;
&:hover{
color:steelblue;
}
}
.contact{
display:block;
padding:3px 20px;
background-color:lightsalmon;
border-radius:20px;
color:#000;
font-size:1.1rem;
}
}
}
}
}
#hamburger{
position:fixed;
right:3rem;
top:15px;
height:auto;
z-index:50;
.bx-menu{
font-size:2.2rem;
font-weight:lighter;
color:white;
cursor:pointer;
background-color:lightsalmon;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
}
}
#slide-menu{
position:fixed;
right:0;
width:80%;
height:100%;
max-width:400px;
background-color:gray;
color:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
transform:translateX(105%);
transition: transform 0.3s ease;
z-index:1000;
&.show{
transform:translateX(0);
box-shadow:-6px 0px 29px 7px lightgray;
}
.close-btn{
position:absolute;
left:20px;
top:17px;
background-color:lightsalmon;
font-size:2.2rem;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background-color 0.3s ease;
}
.menu-wrapper{
position:relative;
width:80%;
top:-100px;
ul{
list-style-type:none;
text-align:left;
li{
margin-bottom:1.5rem;
// 2番目以降すべてを適用
&:nth-child(n+2){
margin-left:2rem;
}
a{
display:inline-block;
color:white;
width:100%;
font-size:2rem;
text-decoration:none;
&::after{
content:attr(data-text);
pointer-events:none;
position:absolute;
right:-150px;
bottom:30%;
width:100%;
color:lightsalmon;
-webkit-text-stroke:1.5px lightsalmon;
opacity:0;
z-index:-1;
text-align:center;
transform:rotate(90deg) scale(3);
transition:0.5s ease;
// トランジション効果を適用するプロパティの指定
transition-property:opacity, transform;
}
&:hover::after{
opacity:1;
transform:scale(3) translateY(10px) rotate(90deg);
}
}
}
}
}
}
@media (min-width:920px){
#hamburger{
display:none;
}
}
@media (max-width:920px){
header{
height:74px;
nav{
display:none;
}
}
}
// main content---------------
.contact-container{
padding:10rem 2rem;
width:90vw;
h2{
text-align:center;
font-size:4rem;
text-transform:uppercase;
letter-spacing:0.08rem;
margin-bottom:2rem;
}
.contact-wrapper{
display:flex;
width:100%;
.left-wrap{
flex:auto;
display:flex;
justify-content:end;
.text-area{
margin:1rem;
}
h3{
font-size:1.5rem;
margin-bottom:1rem;
}
// 電話・メール・住所
.address-area{
margin-top:1rem;
margin-bottom:2rem;
font-size:1.5rem;
ul{
list-style-type:none;
li{
padding:1rem 1rem;
i{
margin-right:1rem;
color:lightsalmon;
}
}
}
}
.sns-area{
font-size:2rem;
.logos{
.facebook{color:#1877f2;}
.twitter{color:#1da1fa;}
.instagram{color:#f26939;}
}
}
}
.right-wrap{
flex:auto;
display:flex;
justify-content: start;
.form-area{
margin:1rem;
label{font-size:1.2rem;}
input[type="text"],
input[type="email"]{
width:150%;
margin-bottom:1rem;
line-height:2;
font-size:110%;
}
textarea{
width:150%;
font-size:150%;
}
input[type="submit"],
input[type="reset"]{
font-size:1.2rem;
margin-top:1rem;
padding:0.3rem 1rem;
border-radius:0.4rem;
border:none;
outline:none;
background-color:lightsalmon;
transition: 0.3s ease;
&:hover{
color:steelblue;
}
}
}
}
}
}
@media (max-width:830px){
.contact-container{
.contact-wrapper{
flex-direction: column-reverse;
.left-wrap{
justify-content: start;
}
}
}
}
JS
const hamburgerMenu = document.querySelector('#hamburger');
const navContent = document.querySelector('#slide-menu');
const closeBtn = document.querySelector('.close-btn');
hamburgerMenu.addEventListener('click', () =>{
navContent.classList.add('show');
// はみ出した内容は表示しない
document.body.style.overflow = 'hidden';
});
closeBtn.addEventListener('click', () =>{
navContent.classList.remove('show');
document.body.style.overflow = 'initial';
});
const navLinks = document.querySelectorAll('#slide-menu menu-wrapper ul li a');
navLinks.forEach(Link => {
Link.addEventListener('click', () =>{
navContent.classList.remove('show');
document.body.style.overflow = 'initial';
})
})